<template>
	<div class="goodsinfo-container">
		<!-- 商品轮播图区域 -->

		<transition
		@before-enter="beforeEnter"
		@enter="enter"
		@after-enter="afterEnter">
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>
			
		

		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<swiper :Lunbolist="lunbotu" :isfull="false"></swiper>
				</div>
			</div>
		</div>

		<!-- 商品购买区域 -->

		<div class="mui-card">
			<div class="mui-card-header">{{ goodsinfo.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价：<del>￥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{ goodsinfo.sell_price }}</span>
					</p>
					<p>购买数量：<numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox>
					</p>
					<p>
						<mt-button type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
						<!-- 分析： 如何实现加入购物车时候，拿到 选择的数量 -->
						<!-- 1. 经过分析发现： 按钮属于 goodsinfo 页面， 数字 属于 numberbox 组件 -->
						<!-- 2. 由于涉及到了父子组件的嵌套了，所以，无法直接在 goodsinfo 页面zhong 中获取到 选中的商品数量值-->
						<!-- 3. 怎么解决这个问题：涉及到了 子组件向父组件传值了（事件调用机制） -->
						<!-- 4. 事件调用的本质： 父向子传递方法，子调用这个方法， 同时把 数据当作参数 传递给这个方法 -->
					</p>
				</div>
			</div>
		</div>

		<!-- 商品参数区域 -->

		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号:{{goodsinfo.goods_no}}</p>
					<p>库存情况:{{goodsinfo.stock_quantity}}件</p>
					<p>上架时间:{{goodsinfo.add_time | dataFormat}}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
				<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
			</div>
		</div>

	</div>
</template>

<script>
	import swiper from '../subcomponents/swiper.vue'
	// 导入 数字选择框 组件
	import numbox from "../subcomponents/goodsinfo_numbox.vue"

	export default {
		data() {
			return {
				id: this.$route.params.id, //将路由参数的对象id挂载到data上
				lunbotu: [],
				goodsinfo: {},
				selectedCount: 1,
				ballFlag:false	//控制小球隐藏和显示的标识符	
			};
		},
		created() {
			this.getLunbotu();
			this.getGoodsInfo();
		},
		methods: {
			getLunbotu() {
				this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.id).then(result => {
					if (result.body.status === 0) {
						result.body.message.forEach(item => {
							item.img = item.src
						})
						this.lunbotu = result.body.message
						console.log("hh")
					} else {
						console.log('woc')
					}
				})
			},
			getGoodsInfo() {
				// 获取商品的信息
				this.$http.get("http://www.liulongbin.top:3005/api/goods/getinfo/" + this.id).then(result => {
					if (result.body.status === 0) {
						this.goodsinfo = result.body.message[0];
					}
				});
			},
			getSelectedCount(count) {
				// 当子组件把 选中的数量传递给父组件的时候，把选中的值保存到 data 上
				this.selectedCount = count;
				console.log("父组件拿到的数量值为： " + this.selectedCount);
			},
			goDesc(id){
				// 点击使用编程式导航 图文介绍页面
				this.$router.push({
					name:"goodsdesc",
					params:{id}
				})
			},
			goComment(id){
				// 点击使用编程式导航 评论页面
				this.$router.push({
					name:"goodscomment",
					params:{id}
				})
			},
			addToShopCar() {
				// 添加到购物车
				this.ballFlag = !this.ballFlag;
				// { id:商品的id, count: 要购买的数量, price: 商品的单价，selected: false  }
				// 拼接出一个，要保存到 store 中 car 数组里的 商品信息对象
				var goodsinfo = {
					id: this.id,
					count: this.selectedCount,
					price: this.goodsinfo.sell_price,
					selected: true
				};
				// 调用store的mutations来将商品加入购物车
				this.$store.commit("addToCar", goodsinfo);
			},
			beforeEnter(el){
				el.style.transform="translate(0,0)"
			},
			enter(el,done){
				el.offsetWidth;
				
				// 小球优化
				// 获取小球位置
				const ballPosition = this.$refs.ball.getBoundingClientRect()
				// 获取徽标位置
				const badgePositon = document.getElementById('badge').getBoundingClientRect()
				
				const xDist = badgePositon.left - ballPosition.left
				const yDist = badgePositon.top - ballPosition.top
				
				el.style.transform=`translate(${xDist}px,${yDist}px)`
				el.style.transition = 'all 1s ease'
				done()
			},
			afterEnter(el){
				this.ballFlag = !this.ballFlag
			}
		},
		components: {
			swiper,
			numbox
		}
	}
</script>

<style lang="less" scoped>
	.goodsinfo-container {
		background-color: #eee;
		overflow: hidden;

		.now_price {
			color: red;
			font-size: 16px;
			font-weight: bold;
		}
		
		.mui-card-footer{
			display: block;
			button{
				margin: 15px 0px;
			}
		}
		
		.ball{
			top: 342px;
			left: 148px;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			z-index: 99;
		}
	}
</style>
